<template>
	<div class="base-card" @click.stop="navgateTo">
			<div class="cover-wrapper" v-if="item.cover">
				<div class="cover" :style="`background: url(${item.cover}?x-oss-process=image/resize,m_fixed,w_450)  center center / cover no-repeat`"></div>
			</div>
		<div class="info">
			<div class="title">{{ item.title }}</div>
			<div class="desc">{{ item.abstract }}</div>
		</div>
	</div>
</template>
<script>
export default {
	name: 'BaseCard',
	props: {
		item: {
			type: Object,
			default: () => ({})
		},
	},
	data() {
		return {

		};
	},
	mounted() {

	},
	methods: {
		
	}
};
</script>
<style lang="less" scoped>
@keyframes downup-data-v-1361cd2d {
	0% {
		transform: translate3d(0, -0.10667rem, 0);
	}

	to {
		transform: translate3d(0, 0.10667rem, 0);
	}
}
.base-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	.cover-wrapper {
		border-radius: 20rpx 20rpx 0 0;
		height: 375rpx;
		overflow: hidden;
		.cover {
			width: 101%;
			height: 375rpx;
			display: block;
			margin: 0 auto;
			border-radius: 20rpx 20rpx 0 0;
		}
		.cover-2 {
			width: 101%;
			height: 378rpx;
			display: block;
			margin: 0 auto;
			border-radius: 20rpx 20rpx 0 0;
		}
	}

	.info {
		flex: 1;
		padding: 40rpx;
		line-height: 1.5;
		.title {
			font-weight: bold;
			font-size: 40rpx;
			word-wrap: break-word;
			word-break: break-all;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
			color: #333;
		}
		.desc {
			margin: 10px 0;
			font-size: 30rpx;
			word-wrap: break-word;
			word-break: break-all;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 4;
			overflow: hidden;
			color: #666;
		}
	}
	.card-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx 20rpx;

		.box {
			width: 200rpx;
			text-align: center;
			.voice {
				width: 68upx;
				height: 68upx;
				display: block;
			}
			.sk-wave {
				width: 68upx;
				height: 68upx;
				border-radius: 50%;
				text-align: center;
				font-size: 1em;
				background: linear-gradient(to right, #f59d5f, #d52915);
			}
			.sk-wave .sk-rect {
				background-color: #ffffff;
				height: 80%;
				width: 4upx;
				display: inline-block;
				margin: 10% 2upx;
				-webkit-animation: sk-wave-stretch-delay 1.2s infinite ease-in-out;
				animation: sk-wave-stretch-delay 1.2s infinite ease-in-out;
			}
			.sk-wave .sk-rect-1 {
				-webkit-animation-delay: -1.2s;
				animation-delay: -1.2s;
			}
			.sk-wave .sk-rect-2 {
				-webkit-animation-delay: -1.1s;
				animation-delay: -1.1s;
			}
			.sk-wave .sk-rect-3 {
				-webkit-animation-delay: -1s;
				animation-delay: -1s;
			}
			.sk-wave .sk-rect-4 {
				-webkit-animation-delay: -0.9s;
				animation-delay: -0.9s;
			}
			.sk-wave .sk-rect-5 {
				-webkit-animation-delay: -0.8s;
				animation-delay: -0.8s;
			}

			@-webkit-keyframes sk-wave-stretch-delay {
				0%,
				40%,
				100% {
					-webkit-transform: scaleY(0.4);
					transform: scaleY(0.4);
				}
				20% {
					-webkit-transform: scaleY(0.75);
					transform: scaleY(0.75);
				}
			}

			@keyframes sk-wave-stretch-delay {
				0%,
				40%,
				100% {
					-webkit-transform: scaleY(0.4);
					transform: scaleY(0.4);
				}
				20% {
					-webkit-transform: scaleY(0.75);
					transform: scaleY(0.75);
				}
			}
		}
		.box-arrow {
			animation: downup-data-v-1361cd2d 1.3s ease-in-out 0.5s infinite alternate;
		}
		.preview {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			text-align: right;
			font-size: 28rpx;
			color: #e2061b;
			& > a {
				color: #e2061b;
			}
		}
	}
}
</style>
